<template>
  <div class="positionBox">
    <div class="commonHead">
      <div class="imgBox">
        <img src="@/assets/img/diLogo.png" alt="">
        <img src="@/assets/img/TEClogo@2x.png" alt="">
        <img src="@/assets/img/muLogo.png" alt="">
      </div>
      <div class="linkBox">
        <div class="linkItem loginOut" @click="toLogin">
         <van-icon class="cross" name="cross" />
        </div>
      </div>
    </div>
    <div class="middleBox">
      <van-button type="info" color="#007dbc" class="systemSetting" @click="setting">系统设置</van-button>
      <div class="formBox">
        <h1>系统设置</h1>
        <div class="fieldArea">
          <van-field label-width="5.2em" class="fieldItem" v-model="address.interFaceAddress" type="text" placeholder="接口地址" label="接口地址" />
          <van-field label-width="5.2em" class="fieldItem" v-model="address.wsAddress" type="text" placeholder="推送地址" label="推送地址" />
          <!-- <van-field label-width="5.2em" class="fieldItem" v-model="tel" type="tel" placeholder="推送端口" label="推送端口" /> -->
        </div>
        <van-button class="loginbtn" type="primary" color="#007DBC" @click="saveAddress">保存</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  data() {
    return {
      address:{
        interFaceAddress:'',
        wsAddress: ''
      },
    }
  },
  mounted(){
    let address = JSON.parse(localStorage.getItem('requestAddress'))
    if(address){
      this.address = address
    }
    // window['systemSettings'] = () => {  //和flutter一样的方法
		// 	systemSettings();
		// };
  },
  methods:{
    setting(){
      window.android.systemSettings()
    },
    toLogin(){
      this.$router.go(-1)
    },
    saveAddress(){
      if(this.address.interFaceAddress || this.address.wsAddress){
        localStorage.setItem('requestAddress',JSON.stringify(this.address))
        this.$router.go(-1)
      }else{
        Toast('请输入接口地址或者推送地址')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.positionBox{
  background: #E7F3F9;
  height: 100%;
  display: flex;
  flex-direction: column;
  .commonHead{
    background: #fff;
    padding: 0 0px 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    height: 70px;
    align-items: center;
    .imgBox{
      img{
        height: 43px;
      }
      img:nth-child(2){
        margin: 0 8px 0 3px;
      }
    }
    .linkBox{
      display: flex;
      align-items: center;
      height: 100%;
      .linkItem{
        display: flex;
        align-items: center;
        height: 100%;
        width: 100px;
        z-index: 10;
        justify-content: center;
      }
      .loginOut{
        background-image: url('../../assets/img/redBgc.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .cross{
          font-size: 40px;
          color: #fff;
          position: relative;
          right: -5px;
        }
      }
    }
  }
  .middleBox{
    flex: 1;
    background: #fff;
    margin: 20px;
    position: relative;
    .systemSetting{
      position: absolute;
      right: 40px;
      top: 30px;
    }
    .formBox{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      h1{
        font-size: 30px;
        font-weight: normal;
        margin-bottom: 20px;
      }
      .fieldArea {
        margin: 5px 0 15px 0;
        .fieldItem{
          font-size: 18px;
          border: 1px solid #e0e0e0;
          margin-bottom: 16px;
          width: 420px;
          // padding: 12px 20px!important;
          height: 55px;
        }
        /deep/ .van-cell {
          padding: 15px 25px;
          .van-field__label {
            label {
              color: #000;
            }
          }
        }
        /deep/ .van-cell:after {
          transform: scaleY(0);
        }
      }
      .loginbtn {
        width: 100%;
        font-size: 25px;
        border-radius:4px;
        height: 55px;
        margin-top: 5px;
      }
    }
  }
}
</style>